import React, { Component } from 'react';
import actions from '../../store/actions';
import { connect  } from 'react-redux'
class Index extends Component {
  state = {
    visible: false,
    messText: ''
  }
  submitMess(id) {
    const action = actions.addMess({ id, info : { name: '游客', context: this.state.messText , datetime: new Date().toLocaleString() } })
    this.props.dispatch(action)
    this.setState({
      visible: false
    })
  }
  handleFocus() {
    this.setState({
      visible: true
    })
  }
  render() {
    const { location } = this.props
    const { state: { desc, title, url, mess, id } } = location
    const { visible, messText } = this.state
    return (
      <div>
        <img src={url} alt="" width="100%"/>
        <h3>{title}</h3>
        <p>{ desc }</p>

       <ul>
        {
            mess.length > 0 && mess.map((v, i) => {
              return (
                <li key={i} style={{
                  padding: 10,
                  borderBottom: '1px solid #ccc'
                }}>
                  <p>{ v.name }---{ v.datetime }</p>
                  <p>{ v.context }</p>
                </li>
              )
            })
          }
       </ul>
       
       <input type="text" onFocus={ () => this.handleFocus() }/>

       <div className="dialog" style={{
         display: visible ? 'block' : 'none',
         position: 'fixed',
         left: 0,
         top: 0,
         width: '100%',
         height: '100%',
         background: '#fff'
       }}>
         <textarea name="" id="" cols="30" rows="10" maxLength="1000" value={ messText }
            onChange={ e => this.setState({ messText: e.target.value }) }
          ></textarea>
          {
            messText
          }
         <button disabled={ messText.length ===0 } onClick={ () => this.submitMess(id) }>提交</button>
       </div>
      </div>
    );
  }
}
const mapState = state => state
const mapDispatch = dispatch => ({ dispatch })
export default connect(mapState, mapDispatch)(Index);

